<template>
  <el-dialog
    title="新增员工"
    :visible="visibleDialog"
    @close="closeDialog"
    @open="openDialog"
  >
    <template #default>  
      <el-form ref="addForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择入职时间" />
        </el-form-item>
        <!-- 聘用形式：不会变动，且量很少，所以就不用调接口，直接前端来维护，就用枚举数据，直接写死就可以 -->
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择">
            <el-option
              v-for="item in formList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <el-cascader 
            v-model="formData.departmentName"
            :props="defaultProps" 
            :options="departList" 
            :show-all-levels="false" 
          />
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择转正时间" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
      
    </template>
  </el-dialog>
</template>

<script>
import {fetchDepartmentAPI} from '@/api/department'
import {addEmployeeAPI} from '@/api/employee'
import tree from '@/utils/tree'
export default {
  name: 'AddEmployee',
  props: {
    visibleDialog: {
      type: Boolean
    }
  },
  data(){
    return {
      formData: {
        username: '', // 用户名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 部门
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      },
      rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 4, message: '用户姓名为1-4位', trigger: ['blur', 'change'] }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: ['blur', 'change'] },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur', 'change'] }
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式不能为空', trigger: ['blur', 'change'] }
        ],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: ['blur', 'change'] }
        ],
        departmentName: [
          { required: true, message: '部门不能为空', trigger: ['blur', 'change'] }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: ['blur', 'change'] }
        ]
      },
      // 聘用形式
      formList: [
        {id: 1, name: '正式'},
        {id: 2, name: '非正式'}
      ],
      departList: [],
      // 这里就是对级联组件的配置，label是修改级联组件的识别字段名，默认为label（提示用户的中文），我们后端的数据叫name，所以我们得自己配置一下
      // checkStrictly：是否为严格的单选模式
      // value: 'name'：他为最终选中提交给后端的数据
      defaultProps: {checkStrictly: true, label: 'name', value: 'name'}
  
    }
  },
  methods:
  {
    // 通过子传父关闭弹框
    closeDialog(){
      this.$emit('close-dialog')
      this.$refs.addForm.resetFields()
      // 手动清空表单数据
      this.formData ={
        username: '', // 用户名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 部门
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      }
    },
    // 获取部门,给级联组件的options
    async openDialog(){
      const res = await fetchDepartmentAPI()
      // 树形处理
      this.departList = tree(res.depts)
    },
    // 清空表单
    resetForm(){
      this.closeDialog()
      // 重置表单+校验痕迹
      this.$refs.addForm.resetFields()
      // 手动清空表单数据
      this.formData ={
        username: '', // 用户名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 部门
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      }
    },
    // 新增员工
    confirm(){
      this.$refs.addForm.validate(async valid => {
        if (valid){
        //  发送请求，新增员工
          await addEmployeeAPI({
            ...this.formData,
            // 我们前端选择部门的时候是一个数组，但是后端要我们提交的最后选中的字符串，因此我们要对数据进行处理
            // 将一个对象中的key重复的时候，后面的key会覆盖前面的key
            departmentName: this.formData.departmentName[this.formData.departmentName.length-1]

          })
          // 提示用户
          this.$message.success('新增员工成功！')
          // 更新列表
          this.$emit('update-list')
          // 清空表单数据
          this.resetForm()
        }
      })
    },
    // 点击取消，关闭弹框
    cancel(){
      this.resetForm()
    }
  }
  // 当对象中的key出现重复的，那么后面的key会替换前面的key
  // 点击取消，关闭弹框
  
}
</script>

<style>
</style>
